<template>
  <el-dialog
    :model-value="dialogFormVisible"
    :title="title"
    align-center
    draggable
    width="80%"
    style="border-radius: 10px; padding: 5px 10px">
    
	<el-table
	  :data="tableData"
	  border
	  style="width: 90%; margin: 20px auto;border-radius: 8px;box-shadow: 5px 5px 10px rgba(51, 126, 204, 0.5);"
	  :header-cell-style="{
	      'background': '#337ecc !important',
	      'color': '#ffffff',
	      'border': 'none !important'
	    }">
		
		
	
		<el-table-column prop="assessorName" label="发布人" width="180" />
		<el-table-column prop="target" label="关键事项描述" width="180" />
		<el-table-column prop="totalScore" label="O分值" width="80" />
		<el-table-column prop="keyResult" label="要求达成的目标" />
		<el-table-column prop="keyWeight" label="考核分数" width="80"/>
		<el-table-column prop="ins" label="考核类型" width="150"/>
		<el-table-column prop="name" label="执行人员姓名" width="180" />
	</el-table>
	
	
	
	
    <el-form
      :model="tableData"
      label-width="60px"
      class="demo-dynamic"
      size="large"
      style="margin: 20px"
    >
	<!-- 原本叫做修正值 -->
      <el-form-item label="" width="150px" hight="200px">
        <el-input v-model="form.completionInstructions" 
            type="textarea"
			style="width: 1000px,hight:200px" />
      </el-form-item>
      <el-form-item>
        <el-button style="width: 150px" type="primary" @click="submitForm"
          >提交</el-button
        >
        <el-button style="width: 150px" @click="onClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import { ref, onBeforeMount, reactive, defineProps, defineEmits,watch} from "vue";
import { finishOkr} from '@/api/person'
import { ElMessage } from "element-plus";

const dialogFormVisible = ref(true);


const props = defineProps({
  dialogFormVisible: {
    type: Boolean,
    required: true,
  },
  select: {
    type: Array,
    required: true, 
  },
  update: {
    type: Function,
    default: () => {},
  },
  close: {
    type: Function,
    default: () => {},
  },
});


const tableData = ref([])
const form=reactive({
  id:"",
  completionInstructions:""
})

watch(props, (newValue, oldValue) => {
  tableData.value.splice(0,tableData.value.length)
  tableData.value.push(newValue.select)
  form.id = newValue.select.keyId;
  form.completionInstructions = newValue.select.completionInstructions
},{ deep: true });   

const submitForm = () => {
    finishOkr(form).then(data=>{
      if (data.code == 200) {
        ElMessage({
          message: "修正成功",
          type: "success",
        });
		
        props.update();
        props.close()
      }
    })
};

const onClose=()=>{
    props.close()
}



</script>



<style lang="scss" scoped >
::v-deep .el-form-item__label:before {
  content: "* ";
  color: red;
}
.ins {
  ::v-deep .el-form-item__label:before {
    content: " ";
  }
}
</style>
